<nz-layout  style="background-color: #fff;">
  <nz-header>外部整合性チェック</nz-header>
      <nz-content>
<div class="input-group" style="margin-bottom: 10px;">
  <span class="input-group-addon" id="basic-addon3" style="width: 140px; text-align: left;">設計書種別：</span>
  <select id="designTypeId" [(ngModel)]="designTypeId" class="form-control" style="width: 300px;">
    <option value="1">画面項目記述書</option>
    <option value="2">処理一覧</option>
    <option value="3">画面間共有データ</option>
    <option value="4">項目移送記述書</option>
  </select>
</div>
<div class="input-group">
  <span class="input-group-addon" style="width: 140px; text-align: left;">画面ID：</span>
<!-- <nz-select style="width: 300px;" nzSize="large" nzShowSearch nzAllowClear nzPlaceHolder="画面IDをご選択ください" [(ngModel)]="screenId">
    <nz-option *ngFor="let item of screenIdList" [nzLabel]="item" [nzValue]="item"></nz-option>
  </nz-select> --> 
 <input type="text" [(ngModel)]="screenId" class="form-control" style="width: 300px; margin-right: 10px;" id="inputScreenId">--> 
    <button nz-button [nzType]="'primary'" (click)="onSearch()">検索</button>
</div>
<table class="table table-bordered table-hover" style="margin-top: 10px;">
  <thead  class="thead-light">
    <tr>
      <th scope="col">設計書種別</th>
      <th scope="col">画面ID</th>
      <th scope="col">画面名</th>
      <th scope="col">設計書名</th>
      <th scope="col">状態</th>
      <th scope="col">更新日時</th>
      <th scope="col">詳細</th>
    </tr>
  </thead>
  <tbody>
    <tr  *ngFor="let importedfile of importedfiles$">
      <td>{{ importedfile.designTypeId }}</td>
      <td>{{ importedfile.screenId }}</td>
      <td>{{ importedfile.designName }}</td>
      <td>{{ importedfile.screenName }}</td>
      <td>{{ importedfile.checkStatus }}</td>
      <td>{{ importedfile.updateDate }}</td>
      <td>
        <a [routerLink]="['/importedfilesdetail', importedfile.screenId]"
        [queryParams]="{ screenId : importedfile.screenId, designTypeId: importedfile.designTypeId ,designName: importedfile.designName,screenName: importedfile.screenName}">詳細</a>
      </td>
    </tr>
  </tbody>
</table>
<button nz-button [nzType]="'primary'" (click)="goBack()">戻る</button>
</nz-content>
</nz-layout>
